<!-- 项目明细 -->
<template>
	<view :class="darkMode ? 'custom-dark' : 'custom-light'" class="w-h-100 journal-add">
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-flex-space-between uni-flex-center">
				<view class="title font28 color333">项目名称</view>
				<input class="uni-input font28 color666" name="input" placeholder="请输入项目名称" />
			</view>
			<view class="uni-form-item uni-flex-space-between uni-flex-center">
				<view class="title font28 color333">日志编号</view>
				<input class="uni-input font28 color666" name="input" placeholder="请输入日志编号" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title font28 color333">日志内容</view>
				<view class="textarea"><textarea class="font28" maxlength="-1" placeholder="请输入日志内容" /></view>
			</view>
			<view class="uni-form-item uni-column image-upload">
				<view class="title font28 color333">图片</view>
				<view class="img-wrap uni-flex">
					<htz-image-upload :max="9" v-model="ceshiData" @uploadSuccess="ceshiUploadSuccess" action="http://XXX"></htz-image-upload>
				</view>
			</view>
			<view class="uni-btn uni-flex uni-flex-space-between">
				<button class="cancel font28" form-type="reset">取消</button>
				<button class="submit font28" type="default" form-type="submit">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
export default {
	components: {
		uniTag,
		uniIcons,
		htzImageUpload
	},
	computed: {
		...mapGetters(['themeBgColor', 'darkMode'])
	},
	data() {
		return {
			isPass: false,
			item: {},
			ceshiData: [],
			options: [
				{
					icon: '/static/img/edit.png',
					text: '调整'
				}
			],
			buttonGroup: [
				{
					text: '拒绝',
					backgroundColor: '#e54d42',
					color: '#fff'
				},
				{
					text: '通过',
					backgroundColor: '#39b54a',
					color: '#fff'
				}
			]
		};
	},
	onReady() {},
	onLoad(options) {
		try {
			this.item = JSON.parse(options.data);
		} catch (e) {
			this.item = [];
		}
	},
	methods: {
		formSubmit: function(e) {
			console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			var formdata = e.detail.value;
			uni.showModal({
				content: '表单数据内容：' + JSON.stringify(formdata),
				showCancel: false
			});
		},
		formReset: function(e) {
			console.log('清空数据');
		},
		ceshiUploadSuccess(res) {
			//上传成功
			var _res = JSON.parse(res.data);
			if (_res.code == 200) {
				this.ceshiData.push(_res.result);
			}
		}
	}
};
</script>

<style lang="scss">
.journal-add {
	background: #fff;
	padding: 20rpx 40rpx;
	.uni-form-item {
		border-bottom: 1px solid #eee;
		&.image-upload{
			border-bottom:none;
			.img-wrap{
				padding: 10rpx 10rpx;
				flex-wrap: wrap;
			}
		}
		.uni-input {
			line-height: 80rpx;
			height: 80rpx;
			padding: 0 10rpx;
		}
		.textarea {
			padding: 10rpx 30rpx;
			textarea {
				width: 100%;
				background: rgba(192, 234, 253, 0.2);
				padding: 30rpx;
			}
		}
	}
	.uni-btn {
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		width: 100%;
		background: #fff;
		left: 0;
		bottom: 0;
		button {
			width: 40%;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 0;
			&::after {
				border: none;
			}
			&.cancel {
				background-color: $bg-color-lightblue;
				color: $text-color-blue;
			}
			&.submit {
				background-color: $bg-color-blue;
				color: #fff;
			}
		}
	}
}
</style>
